<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>bpmn-js modeler demo</title>

  <link rel="stylesheet" href="css/diagram-js.css" />
  <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
  <link rel="stylesheet" href="css/app.css" />
  <style>
    .item{
      display: none;
      cursor: pointer;
    }
    .bjs-powered-by {
      display: none;
    }
    .buttons > li {
      /* display: inline-block; */
      margin-right: 10px;
      height: 26px;
      line-height: 26px;
      float: left;
    }
    .buttons > li > a.btn  {
      background: #00BCD4;
      border: none;
      outline: none;
      padding: 0px 10px;
      color: #fff;
      display: inline-block;
      opacity: 1;
      height: 26px;
      font-size: 14px;
      line-height: 26px;
    }
    .label  {
      background: #00BCD4;
      border: none;
      outline: none;
      padding: 0px 10px;
      color: #fff;
      display: inline-block;
      cursor: pointer;
      opacity: 1;
      height: 26px;
      font-size: 14px;
      line-height: 26px;
    }
    .sy-mask{width:100%;
      height:100%;
      position:fixed;
      background:rgba(0,0,0,0.8);
      left:0;top:0;z-index:1000;
      display: none;
    }
    .sy-alert{
      position:fixed;display:none;background:#fff;border-radius:5px;overflow:hidden;width:300px;max-width:90%;max-height:80%;left:0;right:0;margin:0 auto;z-index:9999}.sy-alert.animated{-webkit-animation-duration:.3s;animation-duration:.3s}.sy-alert .sy-title{height:45px;color:#333;line-height:45px;font-size:15px;border-bottom:1px solid #eee;padding:0 12px}.sy-alert .sy-content{padding:20px;text-align:center;font-size:14px;line-height:24px;color:#666;overflow-y:auto}.sy-alert .sy-btn{height:50%;border-top:1px solid #eee;overflow:hidden}.sy-alert .sy-btn button{float:left;border:0;color:#333;cursor:pointer;background:#fff;width:50%;line-height:45px;font-size:15px;text-align:center}.sy-alert .sy-btn button:nth-child(1){color:#888;border-right:1px solid #eee}.sy-alert.sy-alert-alert .sy-btn button{float:none;width:100%}.sy-alert.sy-alert-tips{text-align:center;width:150px;background:rgba(0,0,0,0.7)}.sy-alert.sy-alert-tips .sy-content{padding:8px;color:#fff;font-size:14px}.sy-alert.sy-alert-model .sy-content{text-align:left}.sy-alert.sy-alert-model .sy-content .form .input-item{margin-bottom:12px;position:relative}.sy-alert.sy-alert-model .sy-content .form .input-item input{display:block;position:relative;width:100%;border:1px solid #eee;padding:10px}.sy-alert.sy-alert-model .sy-content .form .input-item .getcode{border:0;top:0;right:0;position:absolute;background:0;line-height:37px;color:#f60;width:100px;text-align:center}
  </style>
</head>
<body>
  <div class="content with-diagram" id="js-drop-zone">

    <div class="message error">
      <div class="note">
        <p>Ooops, we could not display the BPMN 2.0 diagram.</p>

        <div class="details">
          <span>Import Error Details</span>
          <pre></pre>
        </div>
      </div>
    </div>

    <div class="canvas" id="js-canvas"></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>
  </div>

  <ul class="buttons">
    <li class="item upload">
      <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
        <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn" style="display: none">
        <label class="label" for="uploadFile" >导入</label>
      </form>
    </li>
    <li class="item download">
      <a class="btn" href="javascript:void(0);" id="downloadBpmn">导出</a>
    </li>
    <!--<li class="item submit">
      <a class="btn" href="javascript:void(0);" id="js-download-diagram">
        部署
      </a>
    </li>-->
    <div style="display: none !important;">
      <a class="btn" href="javascript:void(0);" id="saveBpmnModel">保存</a>
    </div>
  </ul>

  <script src="./index.js"></script>
  <script>
    //父页面通过js复制
    var formData = {};
    var processKey = '';
    var name = '';

    function setKeyAndName(){
      const modeling = bpmnModeler.get('modeling')
      var elementRegistry = bpmnModeler.get('elementRegistry');
      var all = elementRegistry.getAll();
      for(var i=0 ; i<all.length ; i++){
        var shape = all[i];
        if (shape.type == 'bpmn:Process'){
          modeling.updateProperties(shape, {
            id: processKey,
            name: name
          })
        }
      }
    }

    //设置formKey
    function setTaskFormKey(formKey){
      debugger
      const modeling = bpmnModeler.get('modeling');
      if(currentTaskShape){
        modeling.updateProperties(currentTaskShape, {
          formKey: formKey
        })
      } else if(addedTask) {
        modeling.updateProperties(addedTask, {
          formKey: formKey
        })
      } else {
        window.parent.$.modal.alert("异常了，请手动填写");
      }
    }

    //设置代理人
    function setTaskAssignee(assignee){
        debugger
        const modeling = bpmnModeler.get('modeling');
        if(currentTaskShape){
            modeling.updateProperties(currentTaskShape, {
                assignee: assignee
            })
        } else if(addedTask) {
            modeling.updateProperties(addedTask, {
                assignee: assignee
            })
        } else {
            window.parent.$.modal.alert("异常了，请手动填写");
        }
    }

    //设置候选用户
    function setTaskCandidateUsers(candidateUsers){
        debugger
        const modeling = bpmnModeler.get('modeling');
        if(currentTaskShape){
            modeling.updateProperties(currentTaskShape, {
                candidateUsers: candidateUsers
            })
        } else if(addedTask) {
            modeling.updateProperties(addedTask, {
                candidateUsers: candidateUsers
            })
        } else {
            window.parent.$.modal.alert("异常了，请手动填写");
        }
    }

    //设置候选组
    function setTaskcCandidateGroups(candidateGroups){
        debugger
        const modeling = bpmnModeler.get('modeling');
        if(currentTaskShape){
            modeling.updateProperties(currentTaskShape, {
                candidateGroups: candidateGroups
            })
        } else if(addedTask) {
            modeling.updateProperties(addedTask, {
                candidateGroups: candidateGroups
            })
        } else {
            window.parent.$.modal.alert("异常了，请手动填写");
        }
    }

    function closeAndRefreshParent(){
      debugger;
      window.parent.parent.$.modal.msgSuccess("创建成功！");
      let parentTabe = window.parent.parentTabe;
      for(var i=0 ; i<window.parent.parent.length ; i++){
        if(window.parent.parent[i].name == parentTabe){
          window.parent.parent[i].$.table.refresh();
        }
      }

      window.parent.$.modal.closeTab();
    }
  </script>
</body>
</html>
